<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<h1>
	<fmt:message key="accounts.show.title" />
</h1>

<div class="container-fluid">
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.number" />
		</div>
		<div class="col-sm-9">
			${account.number}
			<spring:url var="editUrl" value="{number}/edit">
				<spring:param name="number" value="${account.number}" />
			</spring:url>
			(<span class="link"><a id="editUrl" href="${editUrl}"><fmt:message key="command.edit" /></a></span>)
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.name" />
		</div>
		<div class="col-sm-9">
			${account.name}
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.dateOfBirth"/>
		</div>
		<div class="col-sm-9">
			<fmt:formatDate value="${account.dateOfBirth}" />
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.email" />
		</div>
		<div class="col-sm-9">
			${account.email}
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.receiveNewsletter" />
		</div>
		<div class="col-sm-9">
			<fmt:message key="label.${account.receiveNewsletter}" />
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.receiveMonthlyEmailUpdate" /> 
		</div>
		<div class="col-sm-9">
			<fmt:message key="label.${account.receiveMonthlyEmailUpdate}" />			
		</div>
	</div>
</div>


<div>
	<h2>
		<fmt:message key="label.Account.beneficiaries" />
	</h2>
	<c:if test="${!empty account.beneficiaries}">
				<table class="table">
					<thead>
						<tr>
							<th>
								<fmt:message key="label.Account.beneficiaries.name" />
							</th>
							<th>
								<fmt:message key="label.Account.beneficiaries.allocationPercentage" />
							</th>
							<th>
								<fmt:message key="label.Account.beneficiaries.savings" />
							</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="beneficiary" items="${account.beneficiaries}">
							<tr>
								<td>${beneficiary.name}</td>
								<td>${beneficiary.allocationPercentage}</td>
								<td id="${beneficiary.name}Savings">${beneficiary.savings}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
	</c:if>
	<c:if test="${empty account.beneficiaries}">
		<fmt:message key="accounts.show.label.noBeneficaries" />
	</c:if>
</div>

<div id="error" class="alert alert-danger">
	This should be hidden, so your JavaScript has a syntax error.
</div>

<spring:url value="/rewards" var="rewardUrl" />
<spring:url value="/accounts" var="accountUrl" />
<script type="text/javascript">
	var stompClient = null;
	
	// On page load, hide the error div to show the JavaScript is working
	$(function() {
		$("#error").hide();
		connect();
	});
	
	/**
	 * Update beneficiaries with new balances
	 */
	function updateBeneficiaries(data) {
		var beneficiaries = JSON.parse(data.body).beneficiaries;
		for(var i=0;i<beneficiaries.length;i++) {
			var beneficiary = beneficiaries[i];
			$('#'+beneficiary.name+'Savings').html('$'+beneficiary.savings.toFixed(2));
		}
	}
	
	/**
	 * Subscribe to /topic/accounts.${account.number} and use updateBeneficiaries()
	 * as the callback to process each message received.
	 */
	function subscribeUsingUpdateBeneficiariesCallback(frame) {
	    console.log('Connected: ' + frame);
	    // Subscribe to topic, each message will be processed by updateBeneficiaries
	    stompClient.subscribe('/topic/accounts.${account.number}', updateBeneficiaries);
	}
	
	/**
	 * Create the web-socket and use the connected callback to subscribe to
	 * messages - see subscribeUsingUpdateBeneficiariesCallback().
	 */ 
	function connect() {
		var socket = new SockJS('${rewardUrl}');
	    stompClient = Stomp.over(socket);            
	    stompClient.connect({}, subscribeUsingUpdateBeneficiariesCallback);
	}
</script>
